<template>
    <div class="backup-task-management">
      <h2>备份任务管理</h2>
      <el-table :data="backupTasks" style="width: 100%">
        <el-table-column prop="taskName" label="任务名称" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180"></el-table-column>
        <el-table-column prop="progress" label="进度" width="180">
          <template #default="{ row }">
            <el-progress :percentage="row.progress" />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template #default="{ row }">
            <el-button size="small" @click="handleStartTask(row)">启动</el-button>
            <el-button size="small" type="danger" @click="handleStopTask(row)">停止</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue';
  
  const backupTasks = ref([
    { taskName: 'Daily Backup', status: 'Running', progress: 50 },
    { taskName: 'Weekly Backup', status: 'Stopped', progress: 0 },
    { taskName: 'Monthly Backup', status: 'Completed', progress: 100 },
  ]);
  
  const handleStartTask = (task: any) => {
    alert(`启动任务: ${task.taskName}`);
  };
  
  const handleStopTask = (task: any) => {
    alert(`停止任务: ${task.taskName}`);
  };
  </script>